<template>
    <section class="opening--container content">
        <view class="top-back">
            <img class="back-img" src="/static/kaitong-top-back.png" alt />
            <img class="ume" src="/static/ume.png" alt />
        </view>
        <view class="center-back">
            <img class="back-img" src="/static/center-back.png" alt />
            <img class="ume2" src="/static/ume2.png" alt />
            <img class="zhekougoumai" src="/static/zhekougoumai.png" alt />
        </view>
        <view class="cooperation-bank">
            <p class="title">合作银行活动</p>
            <div class="bank-ing-list">
                <img
                    src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=67406198a0efce1bea2bcfcc976a94e3/b21c8701a18b87d6d0d08971000828381e30fdca.jpg"
                    alt
                />
                <img
                    src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=67406198a0efce1bea2bcfcc976a94e3/b21c8701a18b87d6d0d08971000828381e30fdca.jpg"
                    alt
                />
                <img
                    src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=67406198a0efce1bea2bcfcc976a94e3/b21c8701a18b87d6d0d08971000828381e30fdca.jpg"
                    alt
                />
            </div>
            <p class="quanyiduixiang-title">权益对象</p>
            <p class="quanyiduixiang-content">已开通权益并完成激活的用户</p>
            <p class="quanyiguize-title">权益规则</p>
            <p class="quanyiguize-content">1.支持全国UME影城，北京上海除外</p>
            <p class="quanyiguize-content">2.在有效期内，不限次免费观影</p>
            <p class="quanyiguize-content quanyiguize_last">3.限本人使用</p>
            <p class="shiyonggguize-title">使用规则</p>
            <p
                class="shiyonggguize-content"
            >办理成功后，第一次使用前请到任意一个UME影院录入人脸识别，激活权益。以后每次观影可直接购票或通过小程序在线选座。每次检票入场时，需要通过人脸识别道闸。确认本人。</p>
        </view>
    </section>
</template>

<script>
// import footerMenu from "../components/footer";
export default {
    components: {
        // footerMenu
    },
    data() {
        return {};
    },
    onLoad() {},
    methods: {}
};
</script>
<style lang="scss">
.opening--container {
    overflow-y: scroll;
    width: 100vw;
    overflow: hidden;
    min-height: 100vh;
    background-color: #f4f4f4;
    // > view {
    //     background-color: #fff;

    // }
    .top-back {
        width: 100%;
        height: px2vw(195);
        position: relative;
        .back-img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .ume {
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            z-index: 100;
            top: px2vw(60);
            width: px2vw(352);
            height: px2vw(204);
        }
    }
    .center-back {
        width: 100%;
        width: 100%;
        height: px2vw(386);
        position: relative;
        margin-top: px2vw(80);
        background-color: #fff;
        .back-img {
            position: absolute;
            left: -2.5vw;
            width: 110%;
            height: 100%;
        }
        .ume2 {
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            z-index: 100;
            top: px2vw(10);
            width: px2vw(282);
            height: px2vw(134);
        }
        .zhekougoumai {
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            z-index: 100;
            top: px2vw(165);
            width: px2vw(350);
            height: px2vw(203);
        }
    }
    .cooperation-bank {
        width: 100%;
        background-color: #fff;
        margin-top: 10px;
        .title {
            font-size: px2vw($fz26);
            font-weight: bold;
            text-align: center;
            padding-top: px2vw(40);
            background: linear-gradient(to right, #fa9529, #f34a41);
            -webkit-background-clip: text;
            color: transparent;
        }
        .bank-ing-list {
            width: 90%;
            margin: 0 auto;
            img {
                margin: px2vw(20) 0;
                width: 30%;
                height: px2vw(80);
                &:not(:last-child) {
                    margin-right: 5%;
                }
            }
        }
        .quanyiduixiang-title {
            // font-size: px2vw($fz14);
            width: 80%;
            margin: 0 auto;
        }
        .quanyiduixiang-content {
            padding: px2vw(10) 0;
            font-size: px2vw($fz14);
            color: $c-light;
            width: 80%;
            margin: 0 auto;
            border-bottom: px2vw(1) solid #ddd;
        }
        .quanyiguize-title {
            // font-size: px2vw($fz14);
            width: 80%;
            margin: px2vw(20) auto px2vw(10) auto;
        }
        .quanyiguize-content {
            // padding: px2vw(10) 0;
            line-height: px2vw(30);
            font-size: px2vw($fz14);
            color: $c-light;
            width: 80%;
            margin: 0 auto;
            &.quanyiguize_last {
                border-bottom: px2vw(1) solid #ddd;
                padding-bottom: px2vw(40);
            }
        }
        .shiyonggguize-title {
            // font-size: px2vw($fz14);
            width: 80%;
            margin: px2vw(20) auto px2vw(10) auto;
        }
        .shiyonggguize-content {
            // padding: px2vw(10) 0;
            line-height: px2vw(30);
            font-size: px2vw($fz14);
            color: $c-light;
            width: 80%;
            margin: 0 auto;
            &:last-child {
                padding-bottom: px2vw(40);
            }
        }
    }
}
</style>